<template>
  <div>
    <el-dialog
      title="用户新增"
      :visible.sync="dialogFormVisibleRoleAdd"
      :close-on-click-modal="false"
      @close="handleCloseUserAddClose"
    >
      <el-form
        ref="ruleFormUserAdd"
        :model="ruleFormUserAdd"
        :rules="rulesUserAdd"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="昵称" prop="sysUserName">
          <el-input v-model="ruleFormUserAdd.sysUserName" />
        </el-form-item>
        <el-form-item label="登录名" prop="sysUserLoginName">
          <el-input v-model="ruleFormUserAdd.sysUserLoginName" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="sysUserPwd">
          <el-input v-model="ruleFormUserAdd.sysUserPwd" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleFormUserAdd.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" prop="disabledFlag">
          <el-radio-group v-model="ruleFormUserAdd.disabledFlag">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleFormUserAdd.remark" type="textarea" placeholder="" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loadingAddUser" @click="submitFormUserAdd('ruleFormUserAdd')">提交</el-button>
          <el-button @click="resetFormUserAdd('ruleFormUserAdd')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { sysUserAdd } from '@/api/momo/SysUser'
import { success } from '@/utils/tip'

export default {
  name: 'UserAdd',
  props: {
    userAddToChild: String
  },
  data() {
    var sysUserLoginNameValidate = (rule, value, callback) => {
      const myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/
      if (!myReg.test(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleFormUserAdd.sysUserPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loadingAddUser: false,
      dialogFormVisibleRoleAdd: false,
      ruleFormUserAdd: {
        sysUserName: '',
        sysUserLoginName: '',
        sysUserPwd: '',
        remark: '',
        checkPass: '',
        disabledFlag: 0,
        sysUserEmail: ''
      },
      rulesUserAdd: {
        sysUserName: [
          { required: true, message: '用户名必填', trigger: 'blur' }
        ],
        sysUserLoginName: [
          { required: true, validator: sysUserLoginNameValidate, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        sysUserPwd: [
          { required: true, message: '密码必填', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    userAddToChild: {
      deep: true,
      immediate: false,
      handler() {
        this.dialogFormVisibleRoleAdd = true
      }
    }
  },
  methods: {
    submitFormUserAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingAddUser = true
          sysUserAdd(this.ruleFormUserAdd).then(res => {
            res = res.data
            this.dialogFormVisibleRoleAdd = false
            success(res)
            this.loadingAddUser = false
            this.$emit('userAddToFather', '我是孩子')
            this.ruleFormUserAdd.remark = ''
            this.resetFormUserAdd('ruleFormUserAdd')
          }).catch(errorEd => {
            this.loadingAddUser = false
          })
        } else {
          this.loadingAddUser = false
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormUserAdd(formName) {
      this.ruleFormUserAdd.remark = ''
      this.$refs[formName].resetFields()
    },
    handleCloseUserAdd() {
      // this.dialogFormVisibleRoleAdd = false
      // this.$emit('userAddToFather', '我是孩子')
    },
    handleCloseUserAddClose() {
      // this.dialogFormVisibleRoleAdd = false
      // this.$emit('userAddToFather', '我是孩子')
    }
  }
}
</script>

<style scoped>

</style>
